import { ref, readonly } from 'vue';

const HOT_CITY = 'hotCity';

export default function useHotCity() {
    const hotCityRef = ref([]);

    const hotCityReadonly = readonly(hotCityRef);

    const getStore = () => {
        return localStorage.getItem(HOT_CITY) ? JSON.parse(localStorage.getItem(HOT_CITY)) : null;
    }
    const setStore = (data) => {
        localStorage.setItem(HOT_CITY, JSON.stringify(data));
    }
   
    const setHotCity = (param) => {
        hotCityRef.value.push(param);
        setStore(hotCityRef.value);
    }

    const getHotCity = () => {
        return getStore() || [];
    }

    const removeHotCity = () => {
        localStorage.removeItem(HOT_CITY)
    }

    const initHotCity = () => {
        hotCityRef.value = getStore() || [];
    }
    initHotCity();


    return {
        hotCityReadonly,
        removeHotCity,
        setHotCity,
        getHotCity,
    }

}